<!--<%@ page language="java" contentType="text/html; charset=UTF-8"-->
<!--	pageEncoding="UTF-8"%>-->
<!--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>卖出的物品订单信息</title>
<!--<link rel="stylesheet"-->
<!--	href="<c:url value="/statics/bootstrap-3.3.0/css/bootstrap.css"/>">-->
	<link rel="stylesheet"
		  href="../statics/bootstrap-3.3.0/css/bootstrap.css">
	
<!--<link rel="stylesheet"-->
<!--	href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.css"/>">-->
	<link rel="stylesheet"
		  href="../statics/jquery-ui-1.12.1/jquery-ui.css">
	
<!--<link rel="stylesheet"-->
<!--	href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.theme.css"/>">-->
	<link rel="stylesheet"
		  href="../statics/jquery-ui-1.12.1/jquery-ui.theme.css">
	
<!--<link rel="stylesheet" href="<c:url value="/statics/css/style.css"/>">-->
	<link rel="stylesheet" href="../statics/css/style.css">
	
<!--<script src="<c:url value="/statics/jquery-1.12.4/jquery-1.12.4.js"/>"></script>-->
	<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
</head>
		
<body>
<!--	<jsp:include page="../home/header.html" />-->
<div id="head"></div>
<script type="text/javascript">
	$('#head').load('../home/header.html');
</script>

	<div class="container"
		style="position: relative; transform: translate(0, 0)">
		<div class="col-md-9" style="float: left">
			<div class="col-md-12 r1"
				style="background-color: #e4e4e4; height: 40px">
				<div class="col-md-6" style="margin-top: 5px">
					<B style="color: #c4c4c4; font-size: 20px">卖出的物品</B>
				</div>
			</div>
			
			<div class="col-md-12 r2"
				style="background-color: #f9f9f9; padding-top: 5px; padding-bottom: 30px; padding-left: 120px; padding-right: 120px; margin-bottom: 20px">
				<div class="col-md-12" align="center" style="margin-bottom: 5px">
					<h3>信息明细</h3>
				</div>
				<div class="col-md-12" style="background-color: #ffffff">
					<div class="col-md-12"
						style="margin-bottom: 10px; margin-top: 20px;">
						<div class="col-md-12"
							style="padding: 30px; background-color: #f2f2f2">
							<div class="col-md-5"
								style="padding-left: 60px; padding-top: 20px">
								<p style="color: #666666; height: 30px">
									<B>订单号</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>物品名称</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>卖家</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>买家</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>订单状态</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>交易时间</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>结束时间</B>
								</p>
							</div>
							<div id="order" class="col-md-7"
								style="padding-left: 0px; padding-top: 20px">
								<p style="color: #666666; height: 30px">
									<B id="order_id"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_goodName"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_seller"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_customer"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_status"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_sub"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_end"></B>
								</p>
							</div>
						</div>
						
                        <!-- 如果订单状态是2，显示关闭交易button，如果订单状态是3，显示交易已完成button -->
						<div class="col-md-12" style="margin-top: 20px" id="order_btn">
<!--							<button id="success" class="btn btn-primary pull-right"-->
<!--								style="display: ${orderInfo.statusId == 2 ? "-->
<!--								":"none"}" onclick="deleteOrder()">关闭交易</button>-->
<!--							<button id="noSuccess" class="btn btn-primary pull-right"-->
<!--								style="display: ${orderInfo.statusId == 3 ? "-->
<!--								":"none"}" disabled="true">交易已完成</button>-->
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="re-bar" class="col-md-3 r"
			style="background-color: #f9f9f9; padding-bottom: 15px;">
			<div class="col-md-12 r"
				style="text-align: center; margin-top: 10px; background-color: #e4e4e4; padding: 5px">
				<B style="font-size: 20px; color: #a2a2a2">卖出的其他物品</B>
			</div>
			<div class="col-md-12 r"  id="orderBox"
				style="background-color: #ffffff; margin-top: 15px; overflow-y: auto; height: 500px; padding: 5px">
				
   				<!-- 如果 -->
<!--				<c:choose>-->
<!--					<c:when test="${orders.size() == 0}">-->
<!--						<div class="col-md-12" align="center"-->
<!--							style="background-color: #ffffff; margin-top: 50px;">-->
<!--							<img src="<c:url value="/statics/image/logo/yihan.png"/>"-->
<!--								width="95%" ; height="170px;">-->
<!--							<p style="color: #c4c4c4; font-size: 16px">抱歉，暂无卖出的其他物品！</p>-->
<!--						</div>-->
<!--					</c:when>-->
					
<!--					<c:otherwise>-->
<!--						<c:forEach var="order" items="${orders}">-->
<!--							<a href="/wzh-secondshop/user/sellerInfo?orderId=${order.id}">-->
<!--								<div class="col-md-12 rev"-->
<!--									style="padding: 10px; margin-bottom: 5px;">-->
<!--									<p>${order.submitDate}</p>-->
<!--									<p>${order.goodName}</p>-->
<!--								</div>-->
<!--							</a>-->
<!--						</c:forEach>-->
<!--					</c:otherwise>-->
<!--				</c:choose>-->
			</div>
		</div>
	</div>

<!--	<jsp:include page="../home/footer.html" />-->
<div id="foot"></div>
<script type="text/javascript">
	$('#foot').load('../home/footer.html');
</script>

	<script>
    $(function () {
        $(window).scroll(function () {
            if ($(document).scrollTop() >= 20) {
                $("#re-bar").css({
                    "position": "fixed",
                    "top": 50 + $(document).scrollTop() + "px",
                    "width": 285,
                    "right": 15
                });
            } else {
                $("#re-bar").css({
                    "position": "fixed",
                    "top": 70 + "px",
                    "width": 285,
                    "right": 15
                });
            }
        })
    });

    // function deleteOrder() {
    //     $.getJSON("/wzh-secondshop/user/sellerOrder/delete/" + ${orderInfo.id} + "&" +${orderInfo.goodId}, function (data) {
    //         if (data == true){
    //             alert("交易关闭成功！");
    //             $(window).attr('location','/wzh-secondshop/user/userProfile');
    //         } else {
    //             alert("有未知原因，交易关闭失败！");
    //         }
    //     })
    // }
 	</script>
<!--	<script src="<c:url value="/statics/bootstrap-3.3.0/js/bootstrap.js"/>"></script>-->
	<script src=../statics/bootstrap-3.3.0/js/bootstrap.js"/></script>

	<!--<script src="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.js"/>"></script>-->
	<script src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>

<!--	<script-->
<!--		src="<c:url value="/statics/jquery-ui-1.12.1/datepicker-zh-CN.js"/>"></script>-->
	<script
		src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
<!--订单详情展示-->
<script type="text/javascript">
	console.log(location.search.replace('?',''));
	$(function (){
		let str = window.location.search.replace('?','');
		let orderId = str.split("&")[0].split("=")[1];
		let sellerId = str.split("&")[1].split("=")[1];
		$.ajax({
			url : "/order/"+orderId,
			type : "GET",
			contentType : "application/json;charset=utf-8",
			data : "",
			success : function (data){
				console.log(data.data);
				showOrder(data.data);
				console.log(data.data.status);
				showButton(data.data.status);
				getOtherOrder(orderId,sellerId);
			}
		});
		
		function showOrder(result){
			$("#order_id").html(result.id);
			$("#order_goodName").html(result.goodName);
			$("#order_seller").html(result.seller);
			$("#order_customer").html(result.customer);
			if (result.status == 1){
				$("#order_status").html("交易中");
			}else if (result.status == 2){
				$("#order_status").html("交易完成");
			} else {
				$("#order_status").html("订单已取消");
			}
			$("#order_sub").html(result.submitDate);
			$("#order_end").html(result.endDate);
		}
		
		function showButton(result){
			if (result == 1){
				$("#order_btn").append(
						"<button id='btn_success' class='btn btn-primary pull-right'" +
						" onclick='deleteOrder()'>" + "取消交易" + "</button>"
				)
			} else if (result == 2) {
				$("#order_btn").append(
						"<button id='noSuccess' class='btn btn-primary pull-right'" +
						"disabled='true'>" + "交易完成" + "</button>"
				)
			} else {
				$("#order_btn").append(
						"<button id='cancel' class='btn btn-primary pull-right'" +
						"disabled='true'>" + "交易取消" + "</button>"
				)
			}
		}
		
		function getOtherOrder(orderId, sellerId){
			$.ajax({
				url : "/order/seller/others",
				type: "GET",
				data: {
					"orderId" : orderId,
					"sellerId" : sellerId
				},
				contentType: "application/json;charset=utf-8",
				success:function (result){
					console.log(result.data);
					showOtherOrders(result.data);
				}
			});
		}
		
		function showOtherOrders(result){
			if (result == null || result == ''){
				$("#orderBox").append(
						"<div class='col-md-12' align='center' style='margin-top: 150px'>" +
						"<img src='../statics/image/logo/yihan.png' width='95%'; height='170px';>" +
						"<p style='color: #c4c4c4'; font-size: 16px>抱歉，暂未卖出物品！</p>" +
						"</div>"
				)
			} else {
				$.each(result,function (index, obj){
					$("#orderBox").append(
							"<a href='/user/sellerInfo.html?orderId=" +obj['id']+ "&sellerId="+obj['sellerId'] + "'>"+
							"<div class='col-md-12 rev' style='padding: 10px; margin-bottom: 5px;' >" +
							"<div class='col-md-11' style='padding: 0px;'>" +
							"<p></p>"+
							"<p style='color: #c4c4c4;'>" + obj['submitDate'] + "</p>" +
							"<p>" +
							"<B style='color: #2aabd2'>" + obj['customer'] + "</B>"+ "&nbsp;购买了你的物品&nbsp;"+
							"<B style='color: #2aabd2'>" + obj['goodName'] + "</B>" +
							"</p>" +
							"</div>" +
							"</div>" +
							"</a>"
					)
				})
			}
		}
		
	});

	function deleteOrder(){
		let str = window.location.search.replace('?','');
		let orderId = str.split("&")[0].split("=")[1];
		$.ajax({
			url : "/order/"+orderId,
			type : "GET",
			contentType : "application/json;charset=utf-8",
			data : "",
			success : function (result){
				$.getJSON("/order/cancel/"+result.data.goodId +"&"+orderId,function (data){
					if (data.data == 1){
						alert("取消交易成功！");
						window.location.href = '/user/sellerInfo.html?orderId='+orderId+'&sellerId='+result.data.sellerId;
					} else {
						alert("因未知原因，取消交易失败！");
					}
				})
			}
		});
	}
	
	
</script>
</body>
</html>
